<template>
  <div class="box">
    <div class="search-result">
      <div class="container">
        <div class="search-options">
          <div class="input">
            <input type="text" />
            <i class="iconfont icon-sousuo" @click="search"></i>
          </div>
          <div class="select">
            <el-select v-model="selectTime" class="m-2" placeholder="不限时间">
              <el-option
                v-for="item in timeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-select v-model="searchMode" class="m-2" placeholder="不限时间">
              <el-option
                v-for="item in searchModeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <h4 class="info">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-chenggong"></use>
          </svg>
          <span>共找到了1000个相关资源</span>
        </h4>
        <div class="cards-container">hihihi</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
const selectTime = ref("allTime");
const timeOptions = ref([
  { label: "不限时间", value: "allTime" },
  { label: "一年以内", value: "year" },
  { label: "一个月以内", value: "month" },
  { label: "一周以内", value: "week" },
]);

const searchMode = ref("vagueSearch");
const searchModeList = ref([
  { label: "模糊搜索", value: "vagueSearch" },
  { label: "精确搜索", value: "accurateSearch" },
]);
</script>

<style lang="scss" scoped>
div.box {
  background-color: $body-color;
  min-height: calc(100vh - 68px);
  .search-result {
    padding: 2rem 0.5rem;
    .search-options {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: left;
      align-content: center;
      align-items: center;
      @media (max-width: 650px) {
        justify-content: center;
      }
      .input {
        position: relative;
        flex-basis: 330px;
        input {
          box-sizing: border-box;
          width: 330px;
          padding: 0.4rem;
          padding-left: 24px;
          @media (max-width: 400px) {
            width: 100%;
          }
        }
        .icon-sousuo {
          top: 8px;
          left: 7px;
          position: absolute;
          cursor: pointer;
          &:hover {
            color: $first-color-alt;
          }
        }
      }
      .select {
        display: flex;
        gap: 10px;
        flex-basis: 330px;
        .el-select {
          flex-basis: 160px;
        }
      }
    }
    h4 {
      font-weight: normal;
      span {
        margin-left: 5px;
        color: $text-color;
      }
    }
    .cards-container {
      background-color: $container-color;
      padding: 1.5rem;
      border: 1px solid #f1f1f1;
      border-radius: 0.2rem;
      box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
      max-width: 620px;
    }
  }
}
</style>
